import React from 'react';

import { Form, Input, Modal } from 'antd';
import { connect } from 'dva';
import HashUtil from '@/utils/HashUtil';
import  { GM as namespaceGM } from "@/constants/ModelNamespaces";

const FormItem = Form.Item;

interface GmAddProps{
  handleOK: (item:any)=>void;
  handleCancel: ()=>void;
  form: any;
  state: any;
  loading:boolean;
}

class AddView extends React.Component<GmAddProps,any> {
  //提交
  handleOk = () => {
    //1.收集表单数据
    const form = this.props.form;
    //先执行默认校验.
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
        //添加必填字段的默认值.
        // values.create_time = new Date().getTime();//创建日期
        // values.deleted = 0;//是否冻结.
        values.password = HashUtil.md5(values.password);//密码加密后传给后台.
        // console.log('gm addView.formdata:', values);

        this.props.handleOK(values);
        
        form.resetFields();//重置表单

        this.props.handleCancel();//隐藏视图
    });
    
  }
  /**
   * 检查前后密码是否一致.
   */
  compareToFirstPassword=(rule, value, callback) => {
    const form = this.props.form;

    const errors = [];
    if(value && value !== form.getFieldValue('password')) {
        errors.push(new Error('前后输入的密码不一致!'));
        callback(errors);//这里也可以直接塞一个error或者错误信息的string进去.
    }else{
        callback();
    }
  }

  render() {
    const { state,loading, form } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Modal
        visible={state.gmAddView.visible}
        title="添加GM"
        okText="提交"
        onOk={this.handleOk}
        onCancel={this.props.handleCancel}
        confirmLoading={loading}
      >
        <Form layout="vertical">
          <FormItem label="账号">
            {getFieldDecorator('username', {
              rules: [{ required: true, message: '请输入账号' },
            { max:100, message: '最大长度100' }]
            })(
              <Input placeholder="请输入账号" />
            )}
          </FormItem>
          <FormItem label="密码">
            {getFieldDecorator('password', {
              rules: [{ required: true, message: '请输入密码' },
              { max:100, message: '最大长度100' }]
            })(
              <Input type="password" placeholder="请输入密码" />
            )}
          </FormItem>
          <FormItem label="确认密码">
            {getFieldDecorator('repassword', {
              rules: [{ required: true, message: '请确认密码' },
              { max:100, message: '最大长度100' },
            { validator:this.compareToFirstPassword }]
            })(
              <Input type="password" placeholder="请确认密码" />
            )}
          </FormItem>
        </Form>
      </Modal>
    );
  }
}



//###########下面是容器组件,上面是展示组件##############

const mapStateToProps = state => {
  return {
    state: state[namespaceGM],
    loading: state.loading.models.gm
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dispatch:dispatch,
    handleOK:item => {
      dispatch({ type:`${namespaceGM}/add`, payload:item });
    },
    //隐藏视图
    handleCancel:() => {
      dispatch({ type:`${namespaceGM}/toggleAddView`, payload:{ gmAddView:{ visible:false } } });
    }
  };
};

//把View使用Form组件重新包装下.//解决了getFieldDecorator无法定义;
let formedAddView = Form.create()(AddView);

export default connect(mapStateToProps, mapDispatchToProps)(formedAddView);

